import React, { Component } from "react";
import Child from "./components/Child";
import globalContext from "./context";
/*
* React.createContext()返回结果是React元素对象，有两个组件：
* Provider:提供者（提供数据）
* Consumer:消费者（使用数据）
* 实现跨组件传递参数，考虑两件事件即可。
* 如何传递？
*   // 1- 直接使用Provider
*   // value属性即是向下传递的数据
         <globalContext.Provider value={{userName:"zhangsan",age:12}}>
                <Child/>
         </globalContext.Provider>
         *
   // 2- 可以解构赋值
   *      <Provider value={{userName:"zhangsan",age:12}}>
                <Child/>
          </Provider>
* 如何接收？
*    // 1
*    <Consumer>{value=>{
*       // value即是提供者提供的数据
*    }}</Consumer>
*
*    // 2- 可以在类组件中定义一个静态属性：static contextType = globalContext;
*    //    this.context即是提供者提供的数据
* */
class App extends Component {
  state = {
    userName: "lisi",
    age: 22,
    };
    //1.
  /* render() {
    // React.createContext()运行的结果：
    console.log(globalContext);
    return (
      <globalContext.Provider value={{ userName: "zhangsan", age: 22 }}>
        <Child></Child>
      </globalContext.Provider>
    );
  } */
    changeUserName(userName) {
        this.setState({
        userName,
        })
    }
    //2
    render() {
        const {Provider} = globalContext;
        return(
            <Provider value={{ userName: "lisi",
            age: 22}}>
                <button onClick={()=>{this.changeUserName(this.state.userName+'!!')}}>App --- userName</button>
                <Child></Child>
            </Provider>
        )
    }
    
}
export default App;
